import * as React from 'react';
import Header from '@/commonComponents/header/Header';
import useAuth from '@/utils/hooks/useAuth';
import { Space, Button, Dialog, PullToRefresh, Toast } from 'antd-mobile';
import UserHeader from '@/commonComponents/userHeader/index';
import ListItem from './listItem/index';
import Add from '@/imgs/svg/add.svg';
import './index.module.scss';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { fetchPassengers } from './indexApi';
import index from '../index';
import { sleep } from 'antd-mobile/es/utils/sleep'
import type { userInfoProps } from './types';
import { constant } from 'lodash';
import { constants } from 'buffer';
import { getUserInfo } from '../../utils/localStorge';
import { compose } from '@reduxjs/toolkit';
import { createAdult } from '@/pages/order/indexSlice';
import { useAppDispatch } from '@/app/hooks';
const { useEffect, memo, useState } = React;
function Passengers() {
  const dispatch = useAppDispatch();
  const [passengersList, setPassengersList] = useState([])
  const [params] = useSearchParams();
  const show = Number(params.get('show'));
  const navigate = useNavigate();
  const { back } = useAuth();
  const userInfo = JSON.parse(getUserInfo()) || { avatar: '', username: '', token: '' };
  const addPassengers = () => {
    navigate(`/passengerDetail`);
  };
  const [selectId, setSelectId] = useState<string[]>([]);
  const submitPassengers = () => {
    if (selectId.length == 0) {
      Dialog.alert({
        content: '你还没有选择乘客！'
      })
    } else {
      let arr = [] as any[];
      passengersList.forEach((item: any) => {
        selectId.forEach((item1: any) => {
          if (item.bookerId === item1) {
            let obj = {
              id: item.bookerId,
              licenceNo: item.idCard,
              name: item.booker,
              seat: '',
              ticketType: item.ticketType
            };
            arr.push(obj)
          }
        })
      })
      dispatch(createAdult(arr));
      back();
    }
  };
  const getSelectedPassenger = (val: any) => {
    setSelectId(val)
  }
  const onRefresh = async () => {
    await sleep(1000)
    getPassengers();
  }
  const getPassengers = () => {
    fetchPassengers().then(res => {
      // res.data.data.forEach((item: any) => {
      //   item.idCard = item.idCard.substr(0, 6) + '********' + item.idCard.substr(14, 19)
      // })
      setPassengersList(res.data.data)
    })
  }
  useEffect(() => {
    getPassengers();
  }, [])
  return (
    <div styleName="servies-box">
      <Header
        styleName="white-arrow"
        title={`乘客列表`}
        onBack={back}
        style={{
          background: '#1ba9ba',
          color: '#fff',
          zIndex: 1000,
        }}
        type={4}
      />
      <div styleName="user-top">
        <UserHeader
          styleName="mt44"
          avatar={userInfo.avatar}
          username={userInfo.username}
        />
      </div>
      <Button styleName="add-button" onClick={addPassengers}>
        <Space align="center" justify="center">
          <Add />
          <span styleName="add-word">新增乘客</span>
        </Space>
      </Button>
      <PullToRefresh onRefresh={async () => onRefresh()}>
        <ListItem show={show} getSelectedPassenger={getSelectedPassenger} passengersList={passengersList} />
      </PullToRefresh>
      <div styleName="provider">本次购票服务由八维票务提供</div>
      <div styleName='bottom-button'>
        {show ? <Button
          block
          type="submit"
          styleName="submit-button"
          color="primary"
          size="large"
          onClick={() => submitPassengers()
          }
        >
          提交
        </Button> : ''}
      </div>
    </div>
  );
}

export default memo(Passengers);
